<template>
    <transition
      name="custom-classer-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <div class="modal-ctrl-body" v-show="updateAddressPeopleModalObj.isShow"
      >
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>修改警员信息</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="even-row">

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  警员的电话：
                </div>
                <input type="text"
                       maxlength="11"
                       v-model="ModalData.policePhone"
                       :onkeyup="ModalData.policePhone=JPtool.phoneVerifyFn(ModalData.policePhone)"
                       class="modal-text f-l">
              </div>
              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  警员的职务：
                </div>
                <select type="text"
                        v-model="ModalData.policePosition"
                        class="modal-text f-l">
                  <option v-for="item in positionData" :key="item.id"
                          v-text="item.position"
                          :value="item.id"></option>
                </select>
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  手台：
                </div>
                <input type="text"
                       maxlength="16" placeholder="最长16位"
                       :onkeyup="ModalData.partRadioId=JPtool.numberVerifyFn(ModalData.partRadioId)"
                       v-model="ModalData.policeRadioId" class="modal-text f-l input-number"  >
              </div>

              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  排序：
                </div>
                <input type="text"
                       maxlength="4"
                       placeholder="最长4位字符"
                       :onkeyup="ModalData.sort=JPtool.numberVerifyFn(ModalData.sort)"
                       v-model="ModalData.sort"
                       class="modal-text f-l input-number">
              </div>
              <div class="modal-row" >
                <div class="modal-form-key f-l">
                  加密选择:
                </div>
                <div class="secrit-wrap">
                  <div class="secrit-item">
                    <span>加密</span>
                    <input type="radio"
                           name="secrit"
                           value= '1'
                           :checked="ModalData.secrit == 1"
                           v-model="ModalData.secrit"/>
                  </div>
                  <div class="secrit-item">
                    <span>不加</span>
                    <input type="radio"
                           name="secrit"
                           value= '0'
                           :checked="ModalData.secrit != 1"
                           v-model="ModalData.secrit" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="btns text-r">
            <button type="button" class="btn btn-default"  @click="close">取消</button>
            <button type="button" class="btn btn-info" @click="subBtn">确定</button>
          </div>
        </div>
      </div>
    </transition>
</template>

<script>
  export default {
    name: "updateAddressPeopleModal",
    props:["updateAddressPeopleModalObj"],
    data(){
      return {
        ModalData: {
          policeGuid: '',       // 警员的Id ,
          policePhone: '',      // 警员的电话 ,
          policeRadioId : '',   // 电台 ,
          policePosition: '',      // id ,
          sort: 0,              // sort
          secrit: '',   //
        },
        positionData: [],
        policePosition: '',
      }
    },
    methods: {
      //关闭弹窗
      close(){
        this.$emit("updateAddressPeopleModalClose");
        this.clearData(); //关闭弹窗清除数据
      },
      //提交
      subBtn(){
        this.ModalData.policeGuid = this.updateAddressPeopleModalObj.policeGuid;

        if( this.verifyForm.isNumber(this.ModalData.sort) ) {
          this.s_alert("排序只能为整数！");
        }
          if( this.verifyForm.iphone(this.ModalData.policePhone) ){
            this.s_alert("警员的电话错误！");
        }
        this.$axios.post(baseURL+'api/jp-HCZZ-AdminWeb-app-ms/addressbook/maillist/updatepolice',this.ModalData)
          .then(res => {
            this.s_alert('修改成功');
            // alert('修改成功');
            this.clearData();
            this.close()
          })
      },
      clearData(){
        this.ModalData = {
          policeGuid: '',       // 警员的Id ,
          policePhone: '',      // 警员的电话 ,
          policeRadioId: '',    // 电台 ,
          policePosition: '',      // id ,
          sort: 0,              // sort
          secrit: '',   //
        };
        this.policePosition = '';
        this.positionData = [];
      },
      // 职位数据加载
      initPosition(val){
        this.$axios.get(baseURL+"api/jp-HCZZ-AdminWeb-app-ms/policeposition/duty/findallposition")
          .then( res=> {
            this.positionData = res.data;
            let policePosition = ''
            this.positionData.forEach(item => {
              if(item.position === val.policePosition){
                policePosition = item.id
              }
            })
            this.ModalData = {
              policeGuid: val.policeGuid,       // 警员的Id ,
              policePhone: val.policePhone,      // 警员的电话 ,
              policePosition: policePosition,      // id ,
              policeRadioId: val.policeRadioId,    // 电台 ,
              sort: val.sort,              // sort
              secrit: val.secrit,              // sort
            }
          })
      },
    },//  end methods
    watch:{
      updateAddressPeopleModalObj:{
        handler: function (val) {
          if(!val.isShow) return;
          this.initPosition(val);
        },
        deep: true
      }
    }
  }
</script>

<style scoped>
  .input-number {
    width: 60%;
  }
  .secrit-wrap {
    display: flex;
  }
  .secrit-item, .secrit-item span  {
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
  }
</style>
